<template>
    <div class="course-detai;=l">
        <div class="course-info">
            <h1>{{ basInfo.title }}</h1>
            <div class="info-box">
                <div>
                    <span>难度：<el-link class="main-data" :underline="false">{{ basInfo.type == 1 ? '初阶' : (basInfo.type == 2
                        ? '进阶' : '高阶') }}</el-link></span>
                    <el-divider direction="vertical"></el-divider>
                    <span>时长：共 <el-link class="main-data" :underline="false">{{ basInfo.duration }}</el-link> 小时</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>价格：共 <el-link class="main-data" :underline="false">{{ basInfo.isCharge == "1" ? basInfo.price +
                        '元' : '免费' }}</el-link></span>
                </div>
                <div v-loading="verifyLoading">
                    <div v-if="!isVerify">
                        <el-button type="danger" round @click="buy">立即购买</el-button>
                        <el-button plain round>加入购物车</el-button>
                    </div>
                    <div v-else>
                        <el-button type="primary" round @click="$router.push('/learn/' + $route.params.courseId)">学习观看视频</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="概览" name="1">
                    <DetailOverview ref="overview"></DetailOverview>
                </el-tab-pane>
                <el-tab-pane label="目录" name="2">
                    <DetailDirectory ref="directory"></DetailDirectory>
                </el-tab-pane>
                <el-tab-pane label="套餐" name="3">

                </el-tab-pane>
                <el-tab-pane label="问答" name="4" v-if="isVerify">

                </el-tab-pane>
                <el-tab-pane label="笔记" name="5" v-if="isVerify">

                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="确定订单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="课程名称">
                    <span>{{ form.title }}</span>
                </el-form-item>
                <el-form-item label="选择优惠券">
                    <el-select v-model="form.couponId" placeholder="请选择优惠券" @change="change">
                        <el-option :label="item.money + '元优惠券'" :value="item.id" v-for="item, index in couponList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程价格(元)">
                    <span>{{ form.price }}</span>
                    <span v-if="chooseCoupon != null"> - {{ chooseCoupon.money }} = {{ parseFloat(form.price) -
                        parseFloat(chooseCoupon.money) }}</span>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-select v-model="form.type" placeholder="请选择支付方式">
                        <el-option label="支付宝" :value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit" :loading="subLoading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getUserCoupon } from "@/api/coupon"
import { reqVerifyCourseBuy, reqCoueseOrderSave } from '@/api/course'
import DetailOverview from './detail-overview'
import DetailDirectory from './detail-directory'

export default {
    name: 'course-detail',
    components: {
        DetailOverview,
        DetailDirectory
    },
    data() {
        return {
            activeName: "1",
            // 子组件名称
            overview: null,
            directory: null,
            // 课程基本信息
            basInfo: {},
            // 是否购买了
            isVerify: false,
            dialogVisible: false,
            // 是否加载
            verifyLoading: false,
            subLoading: false,
            // 购买的表单
            form: {},
            // 用户拥有的优惠券
            couponList: [],
            // 选择的优惠券
            chooseCoupon: null
        }
    },
    mounted() {
        this.activeName = this.$route.query.type == null ? "1" : this.$route.query.type
        this.getInfo();
        this.getVerifyCourseBuy();
    },
    methods: {
        handleClick(tab, event) {
            this.getInfo()
        },
        async getInfo() {
            if (this.activeName == "1") {
                const resData = await this.$refs.overview.getCourseOverview();
                this.basInfo = resData
            } else if (this.activeName == "2") this.$refs.directory.getCouerseDirectory();
        },
        getVerifyCourseBuy() {
            this.verifyLoading = true;
            const courseId = this.$route.params.courseId;
            reqVerifyCourseBuy({
                courseId: courseId
            }).then((res) => {
                if (res.data == true) {
                    this.isVerify = true;
                } else {
                    this.isVerify = false;
                }
                this.verifyLoading = false;
            }).catch((error) => {
                this.verifyLoading = false;
                this.$message.error(error.message)
            })
        },
        buy() {
            if (JSON.stringify(this.userInfo) == '{}') {
                this.$router.push("/login");
                return;
            }
            // 获取用户拥有的优惠券
            this.getUserSelfCoupon();
            this.form = {
                courseId: this.$route.params.courseId,
                title: this.basInfo.title,
                price: this.basInfo.price,

            }
            this.dialogVisible = true;
        },
        getUserSelfCoupon() {
            // 获取用户拥有的优惠券
            getUserCoupon().then((res) => {
                this.couponList = res.data
            }).catch(error => {
                this.$message.error(error.message);
            })
        },
        change(id) {
            const item = this.couponList.filter(item => item.id == id);
            this.chooseCoupon = item[0];
        },
        handleClose(done) {
            this.form = {};
            done();
        },
        submit() {
            this.subLoading = true;
            reqCoueseOrderSave(this.form).then((res) => {
                this.$message.success(res.message);
                this.subLoading = false;
                this.$router.push("/user/space/order")
            }).catch(error => {
                this.$message.error(error.message);
                this.subLoading = false;
            })

        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {}
        }
    }
}
</script>

<style scoped>
.course-info h1 {
    font-size: 40px;
    color: #1c1f21;
    letter-spacing: 1px;
    line-height: 53px;
    font-weight: 600;
    margin: 24px 0;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.course-info h4 {
    height: 22px;
    font-size: 21px;
    color: #1c1f21;
    line-height: 22px;
    margin-bottom: 37px;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #1c1f21;
    line-height: 20px;
    font-weight: 600;
}

.main-data {
    font-size: 16px;
    color: #f20d0d;
    font-weight: 600;
}

.content {
    margin: 20px 0;
}
</style>